<template>
  <div class="tr-prediction">
    <div class="title">
      <span class="title-text">{{ systemMap[system] }}的流量预测</span>
    </div>
    <div class="migration-rate">
      平均预测偏移率: {{ migrationRate }}
    </div>
    <div class="frame">
      <!-- <loading v-show="runFlag" /> -->
      <vechart :options="realOptions" />
    </div>
  </div>
</template>

<script>
import options from './options/predictOption.json'
import { mapState } from 'vuex'
export default {
  name: 'TrafficPrediction',
  components: {
    vechart: () => import('@components/charts/Vechart.vue')
    // loading: () => import('@components/loading.vue')
  },
  props: {
    system: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      migrationRate: '未计算',
      rawData: [],
      predictData: [],
      timeList: [],
      systemMap: { 'hcda': 'HCDA', 'lcda': 'LCDA', 'low_chiller': '低温冰机',
        'medium_chiller': '中温冰机' },
      runFlag: false,
      options: options
    }
  },
  computed: {
    ...mapState({
      service: state => state.service,
      webModel: state => state.authentication.webModel,
      treeTemplate: state => state.component.treeTemplate
    }),
    realOptions() {
      if (!this.rawData) {
        return this.options
      }
      return { ...this.options, series: [{ ...this.options.series[0], data: this.predictData }, { ...this.options.series[1], data: this.rawData }], xAxis: { ...this.options.xAxis, data: this.timeList }}
    }
  },
  watch: {
    system(val) {
      this.system = val
      this.getTrafficPrediction()
    }
  },
  created() {
    this.$nextTick(() => {
      this.getTrafficPrediction()
    })
  },
  methods: {
    sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time))
    },
    async getTrafficPrediction() {
      try {
        let runFlag = true
        this.$emit('runFlagChange', runFlag)
        const result = await this.service.getTrafficPrediction({ 'id': this.system })
        console.log('prediction', result)
        if (!result.data || result.data.length === 0) {
          runFlag = false
          this.$emit('runFlagChange', runFlag)
          return
        }
        this.timeList = result.data[0].time

        this.predictData = result.data[0].predict
        this.rawData = result.data[0].raw
        const avgMigration = []
        for (const i in this.rawData) {
          const predict = this.predictData[i]
          const raw = this.rawData[i]
          if (!raw || !predict) {
            continue
          }
          const migration = Math.abs(raw - predict) / raw
          avgMigration.push(migration)
        }
        console.log('avgMigration', avgMigration)
        if (avgMigration.length > 0) {
          const migrationRate = (avgMigration.reduce((a, b) => a + b) / avgMigration.length) * 100
          console.log('migrationRate', migrationRate)
          this.migrationRate = migrationRate ? migrationRate.toFixed(2) + '%' : '-'
        }
        await this.sleep(1000)
        runFlag = false
        this.$emit('runFlagChange', runFlag)
        console.log('timelist:' + this.timeList)
        console.log('timelist:' + this.predictData)
      } catch (e) {
        const runFlag = false
        this.$emit('runFlagChange', runFlag)
        this.$notify({
          title: '数据获取出错',
          type: 'error',
          duration: 2500
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tr-prediction{
  display: flex;
  flex-direction: column;
}
.line-chart{
  flex:1;
}
.title{
  width: 92%;
  height: 44px;
  margin-left: 4%;
  padding-left: 5px;
  background-color: rgba($color: #065ab2, $alpha: 0.3);
  border-style: solid;
  border-left-color: #00f4fe;
  font-weight: bold;
   border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  // font-family:
  font-size: 18px;
  & > .title-text{
    color: white;
    line-height: 44px;
  }
}
.migration-rate {
  color: #d1a704;
  margin-top: 1%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.frame{
  position: relative;
  width: 95%;
  height: 90%;
  margin: 0 auto;
}
</style>
